<template>
	<view class="container flex-direction-column" :style="{'--theme-color': themeColor}">
		<!-- 标题栏 -->
		<!-- <title-bar title="商城"></title-bar> -->
		<!-- 顶部轮播图 -->
		<view class="container-carousel">
			<u-swiper :list="list1" keyName="banner_image" height="240rpx" @click="onswiperclick"></u-swiper>
		</view>
		<!-- 内容区 -->
		<view class="container-main flex-item flex">
			<!-- 侧边栏分类 -->
			<scroll-view class="main-sidebar" scroll-y>
				<view class="sidebar-item" :class="{active: selectParentCategory == 0}">
					<view class="item-parent select text-ellipsis-more" @click="changeParentCategory(0)">全部商品</view>
				</view>
				<view class="sidebar-item" :class="{active: selectParentCategory == item.id}"
					v-for="item in categoryList" :key="item.id">
					<view class="item-parent text-ellipsis-more"
						:class="{select: selectParentCategory == item.id && selectChildCategory == 0}"
						@click="changeParentCategory(item.id)">
						{{ item.name }}
					</view>
					<view class="item-child" v-if="selectParentCategory == item.id && item.child && item.child.length">
						<view class="child-box text-ellipsis-more" :class="{select: selectChildCategory == child.id}"
							v-for="child in item.child" :key="child.id" @click="changeChildCategory(child.id)">
							{{ child.name }}
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 商品列表 -->
			<scroll-view class="main-list flex-item" scroll-y :scroll-top="scrollTop" refresher-enabled
				:refresher-triggered="triggered" @scrolltolower="onScrollBottom" @refresherrefresh="onScrollRefresh"
				@scroll="onScroll">
				<view class="list-box" v-if="goodsList.length">
					<view class="box-item flex" v-for="item in goodsList" :key="item.id" @click="toDetails(item.id)">
						<image class="item-image" :src="item.image" mode="aspectFill"></image>
						<view class="item-info flex-item flex-direction-column justify-content-between">
							<view class="info-title text-ellipsis-more">{{ item.name }}</view>
							<view class="info-price">￥{{ item.price }}</view>
						</view>
					</view>
				</view>
				<empty top="64rpx" title="暂无相关商品~" v-else></empty>
			</scroll-view>
		</view>
		<!-- 购物车 -->
		<view class="container-cart" @click="toShoppingCart()">
			<image class="cart-icon"
				src="https://sass-test.doit10019.com/upload/202505/16091850-56762726573836409.png?attname=cart_icon.png"
				mode="aspectFit"></image>
			<view class="cart-number" v-if="Number(cartNumber) > 0">{{cartNumber}}</view>
		</view>
		<!-- 底部导航 -->
		<tabber :active="3"></tabber>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						applet_id: 21,
						banner_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/6a/54ad09877f399769dbae3245b189e3.jpg?attname=ac094c83a45a9a5d.jpg",
						image_type: 0,
					},
					{
						applet_id: 21,
						banner_image: "https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/1c/e85e1664cf6ac4fcb2928cefa2eb2a.jpg?attname=ANNER%E8%BD%AE%E6%92%AD%E5%9B%BE+%281%29.jpg",
						image_type: 0,
					}
				],
				// 加载完成
				loadEnd: false,
				// 轮播图列表
				carouselList: [],
				// 商品分类列表
				categoryList: [{
						id: 5,
						image: "https://xiehui.doit10019.com/uploads/20250210/a6fd7c682ddb5f64469fd53a62f07b10.png",
						name: "泳衣泳具",
						child: [],
					},
					{
						child: [{
							id: 6,
							image: "https://xiehui.doit10019.com/uploads/20250210/db504d0c1867d5e9cce013cafb059ba1.png",
							name: "药剂耗材",
						}],
						id: 4,
						image: "https://xiehui.doit10019.com/uploads/20250210/ac0c2d87abad3f8ab9afa5d7b7c6c1be.png",
						name: "器材装备",
					},
					{
						child: [],
						id: 2,
						image: "https://xiehui.doit10019.com/uploads/20250210/50b053455b9e560b903f979e9673b6ad.png",
						name: "机电设备",
					},
					{
						child: [],
						id: 3,
						image: "https://xiehui.doit10019.com/uploads/20250210/b2879fb207232aa3ae91ce0f3b2398b1.png",
						name: "场馆建造",
					}
				],
				// 已选一级分类
				selectParentCategory: 0,
				// 已选二级分类
				selectChildCategory: 0,
				// 商品列表
				goodsList: [{
						id: 4,
						image: "https://xiehui.doit10019.com/uploads/20250210/c0ecc9ac78256e7ad7fdca9227dafadf.jpg",
						name: "泳池救生用品泳池救生用品",
						price: "680.00",
						recommend_image: "",
					},
					{
						id: 3,
						image: "https://xiehui.doit10019.com/uploads/20250210/acb1d53c8658cf011282fbe0307f842e.jpg",
						name: "COOKSS儿童保温杯大容量男女学生水杯宝宝大肚杯316不锈钢水壶",
						price: "25.00",
						recommend_image: "",
					},
					{
						id: 2,
						image: "https://xiehui.doit10019.com/uploads/20250210/51b5a42674582921f041ead456023b10.jpg",
						name: "316不锈钢保鲜盒带盖方盘冰箱收纳盒盘子野餐盒饺子方盒长方形 三套大号【25*20*5】",
						price: "150.00",
						recommend_image: "",
					},
					{
						id: 1,
						image: "https://xiehui.doit10019.com/uploads/20250210/21bb396c97aa2338360b320a4d1cfdeb.jpg",
						name: "LOLA ROSE罗拉玫瑰经典小绿表女士手表女情人节礼物女送女生生日礼物女礼盒",
						price: "50.00",
						recommend_image: "",
					}
				],
				// 下拉刷新状态
				triggered: false,
				// 滚动条距顶部位置
				scrollTop: 0,
				// 滚动条距顶部位置-以前
				oldScrollTop: 0,
				// 分类查询参数
				page: 1,
				hasMore: false,
				limit: 10,
				// 购物车数量
				cartNumber: 0,
			}
		},
		methods: {
			// 更换一级商品分类
			changeParentCategory(id) {
				this.selectParentCategory = id
				this.selectChildCategory = 0
				this.scrollTop = this.oldScrollTop

			},
			// 更换二级商品分类
			changeChildCategory(id) {
				this.selectChildCategory = id
				this.scrollTop = this.oldScrollTop

			},
			// 商品列表懒加载
			onScrollBottom() {
				if (this.hasMore) {
					this.page++
				}
			},
			// 商品列表下拉刷新
			onScrollRefresh() {
				this.page = 1
				this.triggered = true

			},
			// 商品列表页面滚动
			onScroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			// 跳转商品详情
			toDetails(id) {
				uni.navigateTo({
					url: "/page_mechanism/goods/details?id=" + id
				})
			},

			// 跳转购物车
			toShoppingCart() {
				uni.navigateTo({
					url: "/page_mechanism/cart/index"
				})
			},
		}
	}
</script>

<style lang="scss">
	
	page {
		background: #F6F7FB;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	image {
		display: block;
		width: 100%;
		height: 100%;
	}
	
	view {
		box-sizing: border-box;
	}
	
	button::after {
		border: none;
	}
	
	button.clear {
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		line-height: 1.3;
	}
	
	button.clear::after {
		display: none;
	}
	
	.alignment {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	
	.alignments {
		display: flex;
		align-items: center;
	}
	

	.flex {
		display: flex;
	}

	.inline-flex {
		display: inline-flex;
	}

	.flex-item {
		flex: 1;
		min-width: 0;
	}

	.flex-center {
		align-items: center;
		justify-content: center;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-direction-column {
		display: flex;
		flex-direction: column;
	}

	.align-items-center {
		align-items: center;
	}

	.align-items-start {
		align-items: flex-start;
	}

	.align-items-end {
		align-items: flex-end;
	}

	.justify-content-between {
		justify-content: space-between;
	}

	.justify-content-around {
		justify-content: space-around;
	}

	.justify-content-center {
		justify-content: center;
	}

	.justify-content-start {
		justify-content: flex-start;
	}

	.justify-content-end {
		justify-content: flex-end;
	}

	.wbcentre {
		text-align: center;
	}

	.text-ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
	}

	.text-ellipsis-more {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
		word-break: break-all;
	}

	.safe-padding {
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.container {
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.container-carousel {
			padding: 32rpx;
		}

		.container-main {
			overflow: hidden;

			.main-sidebar {
				width: 200rpx;
				background: #F6F7FB;

				.sidebar-item {
					.item-parent {
						padding: 32rpx 20rpx 32rpx 16rpx;
						border-left: 4rpx solid transparent;
						color: #5A5B6E;
						text-align: center;
						font-size: 28rpx;
						line-height: 40rpx;
					}

					.item-child .child-box {
						color: #5A5B6E;
						text-align: center;
						font-size: 24rpx;
						line-height: 34rpx;
						padding: 24rpx 20rpx 24rpx 16rpx;
						border-left: 4rpx solid transparent;
					}

					&.active {
						background: #FFF;

						.item-parent.select {
							border-color: var(--theme-color);
							font-weight: 600;
						}

						.item-child .child-box.select {
							border-color: var(--theme-color);
							font-weight: 600;
						}
					}
				}
			}

			.main-list {
				.list-box {
					padding: 16rpx 32rpx 32rpx;

					.box-item {
						margin-top: 32rpx;

						&:first-child {
							margin-top: 0;
						}

						.item-image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
						}

						.item-info {
							margin-left: 24rpx;

							.info-title {
								color: #5A5B6E;
								font-size: 28rpx;
								font-weight: 600;
								line-height: 40rpx;
							}

							.info-price {
								margin-top: 16rpx;
								color: var(--theme-color);
								font-size: 28rpx;
								font-weight: 600;
								line-height: 40rpx;
							}
						}
					}
				}
			}
		}

		.container-cart {
			position: fixed;
			right: 32rpx;
			bottom: 16%;
			z-index: 99;
			background: var(--theme-color);
			border-radius: 50%;
			width: 96rpx;
			height: 96rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.cart-icon {
				width: 40rpx;
				height: 36rpx;
			}

			.cart-number {
				position: absolute;
				top: 0;
				left: 100%;
				transform: translateX(-50%);
				margin-left: -16rpx;
				color: var(--theme-color);
				text-align: center;
				font-size: 24rpx;
				line-height: 1;
				min-width: 32rpx;
				height: 32rpx;
				border-radius: 16rpx;
				border: 1px solid var(--theme-color);
				padding: 0 6rpx;
				background: #FFF;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>